context-menu
    position fixed
    top 0
    left 0
    opacity 0
    visibility hidden
    {shad}
    border-radius br
    border 1px solid borderBright
    background background
    z-index 900
    width max-content
    height max-content
    text-align left
    transform translate(0, 0.5rem)
    {transshort}
    transition-property visibility, opacity, transform
    &.opened, & > a:hover > &, & > a:focus > &, & > a:focus-within > &
        opacity 1
        visibility visible
        transform translate(0, 0)
    context-menu
        transition 0.35s 0.25s ease all
        transform translate(-0.5rem, 0)
        &.opened, context-menu a:hover context-menu, context-menu a:focus context-menu, context-menu a:focus-within context-menu
            transition 0.15s 0.15s ease all
    a context-menu
        left 100%
        top unset
    a, context-menu a
        break-inside avoid
        color text
        {trans}
        &:first-child
            border-top-left-radius br
            border-top-right-radius br
        &:last-child
            border-bottom-left-radius br
            border-bottom-right-radius br
        .hotkey
            opacity 0.65
            float right
            margin-left 1rem
            font-size 0.85rem
            line-height 2.25rem
            clear right
        .context-menu-anIcon
            position absolute
            left 0.8rem
            top 0.65rem
            color act
            width 1.125rem
            height @width
        &:hover, &:focus
            color background
            background-color act
            & > svg
                color background
            {transshort}
        &:active
            background-color accent1
            {transshort}
        .context-menu-aChevron
            right 0.5rem
            top 0.5rem
            position absolute
            color borderBright
            if (themeDark)
                color mix(borderBright, text, 85%)
    a, a.checkbox
        display block
        position relative
        padding 0.25rem 1rem 0.25rem 2.5rem
        margin 0
        cursor pointer
    a.checkbox
        [type="checkbox"], [type="radio"]
            left 1rem
            top 0.75rem
            background background
    a.submenu
        padding-right 2.5rem
    .separator
        padding 0
        margin 0.5rem 0
        border-top 1px solid borderBright
        cursor initial
    .&-Swatches
        display inline-block
        vertical-align middle
        padding-right 1rem
    .&-aSwatch
        display inline-block
        margin-right -0.5rem
        width 1rem
        height 1rem
        {shad}
        border-radius 100%
